<template>
  <div class="box" style="margin-top:30px;">
    <CustomTable
      ref="table"
      :showAlert="false"
      :columns="columns"
      :dataSource="pageData"
      :showSelection="false"
      :showPagination="true"
      :loading="loading"
      rowKey="id"
      @change="onTableChange"
    >
      <template slot="order" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
      <template slot="phone" slot-scope="text, record">
        <span
          >{{ text }} <a-tag v-if="record.isSamplePerson" style="margin-left:20px;" color="red">负样本人员</a-tag></span
        >
      </template>
      <template slot="action" slot-scope="text, record, index">
        <a-space size="large">
          <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(getIndex(index))">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </CustomTable>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  components: { CustomTable },
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 140,
          align: 'center',
          customRender: (text, record, index) => `${(this.pageData.current - 1) * this.pageData.size + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          align: 'left',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200
        }
      ],
      loading: false,
      recordData: []
    }
  },

  created() {
    // console.log('this.dataList')
    // console.log(this.dataList)
    this.recordData = this.dataList
    this.refreshTable(1)
  },
  methods: {
    onClearRowKeys() {
      this.$refs.table.onClearRowKeys()
    },
    getIndex(index) {
      return (this.pageData.current - 1) * this.pageData.size + index
    },
    refreshTable(current) {
      this.loading = false
      this.pageData = {
        current: current,
        pages: parseInt((this.recordData.length - 1) / 6) + 1,
        size: 6,
        records: this.recordData,
        total: this.recordData.length
      }
      //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
      querySimpleByPhoneList(this, 2, this.pageData.records)
    },
    onDelete(index) {
      this.recordData.splice(index, 1)
      //页面跳到第一页
      this.loading = true
      setTimeout(() => {
        this.refreshTable(1)
      }, 1000)
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.refreshTable(pagination.currentPage)
    },
    onValidate() {
      let length = this.pageData.records.length
      let flag = true
      if (length <= 0) {
        this.$message.warning('请添加目标人')
        flag = false
      }
      return flag
    },
    getData() {
      // return this.recordData
      let dataList = this.recordData.map(item => {
        if (item.id != undefined) {
          return {
            id: item.id.toString(),
            phoneNumber: item.phone,
            userName: item.name
          }
        } else {
          return {
            phoneNumber: item.phone,
            userName: item.name
          }
        }
      })
      return dataList
    },
    setData(arr) {
      this.recordData = arr
      this.refreshTable(1)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-pagination-options-size-changer.ant-select {
  display: none;
}
.box {
  position: relative;
  overflow: hidden;
  height: 500px;
  /deep/.ant-table-wrapper {
    height: 100%;
  }
  /deep/.ant-table-placeholder {
    border-bottom: none;
  }
}
</style>
